<template>
  <div class="sortList">
    <label>快速排序动画演示</label>
    <div class=" num num1 " :class="{ num1a: isAnimation }">1</div>
    <div class="num num2 " :class="{ num2a: isAnimation }">3</div>
    <div class="num num3" :class="{ num3a: isAnimation }">7</div>
    <div class="num num4" :class="{ num4a: isAnimation }">2</div>
    <div class="num num5" :class="{ num5a: isAnimation }">5</div>
    <div class="num num6" :class="{ num6a: isAnimation }">6</div>
    <div class="num num7" :class="{ num7a: isAnimation }">4</div>
    <div class="arrow al" :class="{ ala: isAnimation }">L</div>
    <div class="arrow ar" :class="{ ara: isAnimation }">R</div>
    <div class="arrow ap" :class="{ apa: isAnimation }">P</div>
    <el-button class="start-btn" type="primary" style="margin-top: 20px;" @click="handleClick">开始演示</el-button>
  </div>
</template>

<style lang="scss" scoped>
.sortList {
  position: relative;
  width: 100%;
  height: 400px;

  // 箭头
  .arrow {
    position: relative;
    width: 20px;
    height: 25px;
    text-align: center;
    color: aliceblue;
    background-color: #409EFF;
    margin-top: 20px;

    &::before {
      position: absolute;
      top: -24px;
      left: -4px;
      content: ' ';
      width: 0;
      height: 0;
      color: aliceblue;
      border-width: 14px;
      border-style: solid;
    }
  }

  .al {
    position: absolute;
    background-color: #c71616;
    top: 245px;
    left: 164px;

    &::before {
      border-color: transparent transparent #c71616 transparent;
    }
  }

  .ala {
    animation: animation-al 15s linear forwards;
  }

  .ar {
    position: absolute;
    background-color: #162bc7;
    top: 245px;
    left: 789px;

    &::before {
      border-color: transparent transparent #162bc7 transparent;
    }
  }

  .ara {
    animation: animation-ar 15s linear forwards;
  }

  .ap {
    position: absolute;
    background-color: #b010a2;
    top: 245px;
    left: 914px;

    &::before {
      border-color: transparent transparent #b010a2 transparent;
    }
  }

  .apa {
    animation: animation-ap 15s linear forwards;
  }

  // 数字
  .num {
    width: 50px;
    margin-left: 30px;
    margin-right: 30px;
    background: #409EFF;
    border-radius: 10px;
    text-align: center;
    color: aliceblue;
    transform: all 0.5s;
  }

  .num1 {
    position: absolute;
    top: 224px;
    left: 120px;
    height: 24px;
    line-height: 24px;
  }

  .num1a {
    animation: animation-num1 15s linear forwards;
  }

  .num2 {
    position: absolute;
    top: 176px;
    left: 245px;
    height: 72px;
    line-height: 72px;
    background: #67C23A;

  }

  .num2a {
    animation: animation-num2 15s linear forwards;
  }

  .num3 {
    position: absolute;
    top: 80px;
    left: 370px;
    height: 168px;
    line-height: 168px;
    background: #E6A23C;

  }

  .num3a {

    animation: animation-num3 15s linear forwards;
  }

  .num4 {
    position: absolute;
    top: 200px;
    left: 495px;
    height: 48px;
    line-height: 48px;
    background: #F56C6C;

  }

  .num4a {

    animation: animation-num4 15s linear forwards;
  }

  .num5 {
    position: absolute;
    top: 128px;
    left: 620px;
    height: 120px;
    line-height: 120px;
    background: #c1c94f;

  }

  .num5a {
    animation: animation-num5 15s linear forwards;
  }

  .num6 {
    position: absolute;
    top: 104px;
    left: 745px;
    height: 144px;
    line-height: 144px;
    background: slateblue;

  }

  .num6a {
    animation: animation-num6 15s linear forwards;
  }

  .num7 {
    position: absolute;
    top: 152px;
    left: 870px;
    height: 96px;
    line-height: 96px;
    background: #337ecc;

  }

  .num7a {
    animation: animation-num7 15s linear forwards;
  }

  .start-btn {
    position: absolute;
    left: 0;
    top: 320px;
  }
}

@keyframes animation-num1 {
  57% {
    opacity: 1;
    left: 120px;
  }

  58% {
    opacity: 0;
  }

  59% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes animation-num2 {
  57% {
    opacity: 1;
    left: 245px;
  }

  58% {
    opacity: 0;
  }

  59% {
    opacity: 1;
  }

  71% {
    left: 245px;
  }

  80% {
    left: 370px;
  }

  100% {
    left: 370px;
  }
}

@keyframes animation-num3 {
  21% {
    left: 370px;
  }

  30% {
    left: 495px;
  }

  41% {
    left: 495px;
  }

  50% {
    left: 870px;
  }

  88% {
    opacity: 1;
  }

  89% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  90% {
    left: 870px;
  }

  100% {
    left: 870px;
  }
}

@keyframes animation-num4 {
  21% {
    left: 495px;
  }

  30% {
    left: 370px;
  }

  57% {
    opacity: 1;
    left: 370px;
  }

  58% {
    opacity: 0;
  }

  59% {
    opacity: 1;
  }

  71% {
    left: 370px;
  }

  80% {
    left: 245px;
  }

  100% {
    left: 245px;
  }
}

@keyframes animation-num5 {
  90% {
    left: 620px;
  }

  88% {
    opacity: 1;
  }

  89% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 620px;
  }
}

@keyframes animation-num6 {
  88% {
    opacity: 1;
  }

  89% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  90% {
    left: 745px;
  }

  100% {
    left: 745px;
  }
}

@keyframes animation-num7 {
  41% {
    left: 870px;
  }

  50% {
    left: 495px;
  }

  100% {
    left: 495px;
  }
}

@keyframes animation-al {
  10% {
    left: 289px;
  }

  11% {
    left: 289px;
  }

  20% {
    left: 414px;
  }

  31% {
    left: 414px;
  }

  40% {
    left: 539px;
  }

  50% {
    opacity: 1;
    left: 539px;
  }

  51% {
    opacity: 0;
    left: 539px;
  }

  59% {
    opacity: 0;
    left: 164px;
  }

  60% {
    opacity: 1;
    left: 164px;
  }

  70% {
    left: 289px;
  }

  80% {
    opacity: 1;
    left: 289px;
  }

  81% {
    opacity: 0;
    left: 289px;
  }

  89% {
    opacity: 0;
    left: 664px;
  }

  90% {
    opacity: 1;
    left: 664px;
  }

  99% {
    opacity: 1;
    left: 789px;
  }

  100% {
    opacity: 0;
    left: 789px;
  }
}

@keyframes animation-ar {
  10% {
    left: 664px;
  }

  11% {
    left: 664px;
  }

  20% {
    left: 539px;
  }

  31% {
    left: 539px;
  }

  40% {
    left: 414px;
  }

  50% {
    opacity: 1;
    left: 414px;
  }

  51% {
    opacity: 0;
    left: 414px;
  }

  59% {
    opacity: 0;
    left: 289px;
  }

  60% {
    opacity: 1;
    left: 289px;
  }

  70% {
    left: 164px;
  }

  80% {
    opacity: 1;
    left: 164px;
  }

  81% {
    opacity: 0;
    left: 164px;
  }

  89% {
    opacity: 0;
    left: 789px;
  }

  90% {
    opacity: 1;
    left: 789px;
  }

  99% {
    opacity: 1;
    left: 664px;
  }

  100% {
    opacity: 0;
    left: 664px;
  }
}

@keyframes animation-ap {
  50% {
    opacity: 1;
    left: 914px;
  }

  51% {
    opacity: 0;
    left: 914px;
  }

  59% {
    opacity: 0;
    left: 414px;
  }

  60% {
    opacity: 1;
    left: 414px;
  }

  80% {
    opacity: 1;
    left: 414px;
  }

  81% {
    opacity: 0;
    left: 414px;
  }

  89% {
    opacity: 0;
    left: 914px;
  }

  90% {
    opacity: 1;
    left: 914px;
  }

  99% {
    opacity: 1;
    left: 914px;
  }

  100% {
    opacity: 0;
    left: 914px;
  }
}
</style>

<script setup>
import { computed, ref, onMounted } from "vue";
let isAnimation = ref(false);
const handleClick = () => {
  isAnimation.value = !isAnimation.value;
}
</script>